<!-- 问卷模板预览页面 -->
<template>
  <div class="page">
    <!-- 导航栏 -->
    <uni-nav-bar class="nav-bar" fixed="true" statusBar="true" :border="false" leftIcon="left" @clickLeft="back">
      <div class="nav-bar-center">
        <div class="title ellipsis"> {{ currentQuestionnaire?.title ?? '' }} </div>
      </div>
    </uni-nav-bar>
    <!-- 页面主体 -->
    <div class="container" @click="toggleActionPromptDialog(true)">
      <!-- 问卷头部 -->
      <div class="questionnaire-head">
        <!-- 问卷封面 -->
        <div class="head-cover">
          <image class="img" :src="fixQuestionnaireCover(currentQuestionnaire?.coverImg)" mode="aspectFill" />
        </div>
        <!-- 问卷标题 -->
        <div class="head-title ellipsis">{{
          currentQuestionnaire?.title ?? '' }} </div>
        <!-- 问卷描述 -->
        <div class="questionnaire-describe"> {{
          currentQuestionnaire?.desc ?? '' }} </div>
      </div>
      <!-- 问卷内容 -->
      <div class="content">
        <!-- 不同的问题类型的区块 -->
        <div :class="questionList.questionCategory === identityQuestionCategoryName ? 'identity-block' : 'normal-block'"
          v-for="  (questionList, questionListIndex)   in   currentQuestionnaire?.categoryQuestionList  "
          :key="questionList.id">

          <!-- 身份信息问题特有的结构 -->
          <div class="question" v-if="questionList.questionCategory === identityQuestionCategoryName">
            <text class="title">您的身份是？</text>
            <questionnaire-radio-group class="radio-group" disable
              v-model="questionList.questionList[0].options"></questionnaire-radio-group>
          </div>

          <!-- 一般问题特有的结构 -->
          <!-- 问题类别 -->
          <div class="question-type" v-if="isShowQuestionList(questionList)">
            问题类别：{{ questionList.questionCategory }}
          </div>
          <!-- 问题列表 -->
          <div class="question-list" v-if="isShowQuestionList(questionList)">
            <div class="question" v-for="(  question, questionIndex  ) in   questionList.questionList  "
              :key="question.id">
              <text class="question-title">Q{{ questionIndex + 1 }}: {{ question.title }}</text>
              <textarea class="question-input" type="text" v-model="question.answer" disabled auto-height
                :placeholder="question?.placeholder || '请输入内容'" />
            </div>
          </div>
        </div>
        <!-- 结束语 -->
        <div class="conclusion">
          {{ currentQuestionnaire?.conclusion ?? '' }}
        </div>
      </div>
    </div>
  </div>
  <!-- 底部固定栏 -->
  <div class="bottom-bar">
    <!-- 「编辑」按钮 -->
    <div class="left-btn" @click.stop="editBtnClick">
      <img class="left-btn-icon" src="@/static/icons/common/edit.svg" alt="">
      <text class="left-btn-text">编辑</text>
    </div>
    <!-- 「创建」按钮 -->
    <button class="right-btn" @click.stop="createBtnClick">创建问卷</button>
  </div>
  <!-- 操作提示对话框 -->
  <uni-popup ref="actionPromptDialog" type="dialog">
    <uni-popup-dialog ref="deleteConfirmClose" type="info" mode="base" title="提示" content="请在创建问卷后再操作哦~" cancelText="取消"
      @close="actionPromptDialogCancelBtnClick" confirmText="知道了" @confirm="actionPromptDialogConfirmBtnClick">
    </uni-popup-dialog>
  </uni-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useQuestionnaire } from '@/stores/questionnaire'
import { back, navigateTo } from "@/utils/navigate"
import QuestionnaireRadioGroup from '@/components/questionnaire-radio-group.vue'
import { identityQuestionCategoryName, } from '@/static/constants/questionnaire-constant';
import { onLoad } from '@dcloudio/uni-app';
import { reqGetManagedQuestionnaire } from '@/api/api-questionnaire';
import dayjs from 'dayjs';
import { getCurrentInstance } from 'vue';
import { useUser } from '@/stores/user-store';
import { fixQuestionnaireCover } from '@/utils/others';

const questionnaire = useQuestionnaire()
const currentQuestionnaire = ref<Questionnaire>()

const userStore = useUser()
const { checkUserInfo } = userStore

/** 当前组件实例 */
const currentInstance = getCurrentInstance()

//#region 获取问卷模板以及显示相关

// 挂载后，获取问卷
// XXX 这里使用了async/await，但是uni-app的onLoad不支持async/await，所以暂时使用@ts-ignore忽略错误
// @ts-ignore
onLoad(async (options: AnyObject) => {
  console.log('options', options)
  const res: any = await reqGetManagedQuestionnaire(options.templateId)
  currentQuestionnaire.value = {
    ...JSON.parse(res.data.data.content),
    createDate: dayjs().format('YYYY-MM-DD'),
  }
  console.log('currentQuestionnaire', currentQuestionnaire.value)
})

/** 根据questionList判断是否显示该结构 */
const isShowQuestionList = (questionList: CategoryQuestion) => {
  return questionList.questionCategory != identityQuestionCategoryName
    && questionList.questionList.length > 0
}

//#endregion

//#region 操作提示对话框

/**
 * 切换对话框显示与否
 * @param isShow 是否显示
 */
const toggleActionPromptDialog = (isShow: boolean) => {
  const actionPromptDialog: any = currentInstance?.refs.actionPromptDialog
  if (isShow) {
    actionPromptDialog?.open()
  } else {
    actionPromptDialog?.close()
  }
}

/** 操作提示对话框的取消按钮点击事件 */
const actionPromptDialogCancelBtnClick = () => {
  toggleActionPromptDialog(false)
}

/** 操作提示对话框的确定按钮点击事件 */
const actionPromptDialogConfirmBtnClick = () => {
  toggleActionPromptDialog(false)
}
//#endregion

// #region 按钮点击事件

/** 问卷模板ID */
let templateId = ''

// 页面加载时，获取问卷模板ID
onLoad((options) => {
  templateId = options?.templateId || ''
})

/** 「编辑」按钮点击事件 */
const editBtnClick = () => {
  if (checkUserInfo(
    { redirect: 'questionnaire-template-preview', redirectQuery: { templateId } }
  )) {
    questionnaire.editCurrentQuestionnaire(currentQuestionnaire.value!)
    navigateTo('questionnaire')
  }
}

/** 「创建」按钮点击事件 */
const createBtnClick = async () => {
  if (checkUserInfo(
    { redirect: 'questionnaire-template-preview', redirectQuery: { templateId } }
  )) {
    questionnaire.editCurrentQuestionnaire(currentQuestionnaire.value!)
    // 跳转到「编辑标题和描述」页面
    navigateTo('questionnaire-edit-title-describe', {
      from: 'template'
    })
  }
}
// #endregion
</script>

<style lang="scss" scoped>
@import '@/static/styles/questionnaire.scss';

.page {
  // 默认模式
  // 区块间隔
  --block-gap: 8px;
  // 区块标题背景颜色
  --block-title-bg-color: #fff;
  // 问题间隔
  --question-gap: 0px;
  // 问题最小高度
  --question-min-height: 20.2564vw;
  // 问题内部padding-top
  --question-padding-top: 8px;

  width: 100vw;
  height: 100vh;

  // 隐藏滚动条
  overflow: scroll;

  &::-webkit-scrollbar {
    display: none;
  }


  display: grid;
  grid-template: 'nav-bar' auto
  'container' 1fr;

  .container {
    grid-area: container;


    display: grid;
    grid-template:
      'head' 78.2051vw
      'content' auto;

    position: relative;

    // 预览模式在顶部增加内边距
    &.preview-banner-show {
      padding-top: 40px;
    }


    // 问卷头部
    .questionnaire-head {
      width: 100vw;
      background-color: #ffffff;

      padding: 16px;
      box-sizing: border-box;
      display: grid;
      grid-template:
        'cover' 37.9487vw
        '.' 16px
        'title' 8.7179vw
        '.' 8px
        'desc' 1fr;
      justify-items: center;

      // 头图
      .head-cover {
        grid-area: cover;
      }

      // 问卷标题
      .head-title {
        grid-area: title;
      }

      // 问卷描述
      .questionnaire-describe {
        grid-area: desc;
      }
    }

    // 问卷内容
    .content {
      grid-area: content;

      display: flex;
      flex-direction: column;
      align-items: center;

      // 身份问题区块
      .identity-block {
        margin-top: var(--block-gap);
        width: 100%;
        background-color: #fff;

        .question {
          width: 100%;
          height: 22.8205vw;

          box-sizing: border-box;
          padding: 16px;
          display: grid;
          grid-template:
            'title more' 5.3846vw
            'radio-group radio-group' 1fr
            / 1fr 4.6154vw;
          grid-row-gap: 12px;

          // 身份问题标题
          .title {
            grid-area: title;
            font-size: 3.8462vw;
          }

          .radio-group {
            grid-area: radio-group;
          }
        }
      }
    }

    // 一般问题区块
    .normal-block {
      margin-top: var(--block-gap);
      width: 100%;

      // 问题类别
      .question-type {
        padding: 16px 0 8px 16px;
        font-size: 4.6154vw;
        color: #17ce92;
        background-color: var(--block-title-bg-color);
      }

      // 问题列表
      .question-list {
        width: 100%;
        display: grid;
        grid-auto-rows: minmax(20.2564vw auto);
        grid-row-gap: var(--question-gap);

        // 问题
        .question {
          box-sizing: border-box;
          background-color: #fff;


          padding: var(--question-padding-top) 16px;
          display: grid;
          grid-template:
            'title more' auto
            'input input' minmax(8.7179vw, auto) / 1fr 46.15rpx;
          grid-row-gap: 8px;
          align-items: center;

          .question-title {
            grid-area: title;
            font-size: 28.85rpx;
            color: #ff5875;
          }

          .question-input {
            grid-area: input;

            width: calc(100% - 24px);
            background-color: #f4ebf1;
            border-radius: 2px;

            padding: 8px 12px;
            font-size: 25rpx;
          }
        }
      }
    }

    // 结束语
    .conclusion {
      margin-top: 24px;
    }
  }
}
</style>
